$(function(){
  //判断用户是否登录来动态改变注册登录节点
  // 获取cookie
  var username = getCookie('username')
  // console.log(username)
  if(username){
      $('.logininfo').html(`
        <li><a><span style="font-size:16px;color:#fa6000;">${username}</span></a></li>
        <li class="logout"><a>退出</a></li>
      `)
      $('.logout').click(function(){
          removeCookie('username')
          $('.logininfo').html(`
              <li><a href="./login.html">登录</a></li>
              <li><a href="./register.html">注册</a></li>
          `)
      })
  }
})

//下载APP下拉
$(function () {
  $(".download").mouseover(function(){
    $(this).children().last().stop().slideDown().siblings().css('color',"#fa6600")
  })
  $(".download").mouseout(function(){
    $(this).children().last().stop().slideUp().siblings().css('color',"#a8b1b8")
  })
});

//购物车下拉
$(function () {
  $(".header-r").mouseover(function () {
    $(this).children().last().stop().slideDown().siblings().css('color', "#fa6600")
  })
  $(".header-r").mouseout(function () {
    $(this).children().last().stop().slideUp().siblings().css('color', "#a8b1b8")
  })
});

//商品分类显示隐藏
$(function () {
  $(".center-li").hover(function () {
    $(".center-slide").show()
  }, function () {
    $(".center-slide").hide()
  })
})

//手机分类隐藏
$(function () {
  $(".nav-m").children().first().mouseover(function () {
    $(".phone-slide").stop().slideDown()
  })
  $(".nav-m").children().first().mouseout(function () {
    $(".phone-slide").stop().slideUp()
  })
})

//返回顶部
$(window).scroll(function(){
  var t = document.documentElement.scrollTop || document.body.scrollTop
  if(t >= 800){
    $(".fanhui").css('display',"block")
  }else{
    $(".fanhui").css('display',"none")
  }
  $(".fanhui").click(function(){
    t = 0
    document.documentElement.scrollTop = document.body.scrollTop = t
    $(".fanhui").css('display',"none")
  })
  return false
})

//滑动轮播图
$(function () {
  // 创建小点放到ol中
  $('.carousel ul').children().each((i, v) => {
    // 创建li并放在ol中
    // 给第一个添加红色背景
    if (i === 0)
      $('.carousel ol').append($('<li style="background-color:#fff;"></li>'))
    else
      $('.carousel ol').append($('<li></li>'))
  })
  // 修饰ul
  var $first = $('.carousel ul').children().first().clone()
  $('.carousel ul').prepend($('.carousel ul').children().last().clone())
  $('.carousel ul').append($first)
  $('.carousel ul').css({
    width: $first.width() * $('.carousel ul li').length + 'px',
    left: -$first.width() + "px"
  })
  // 定义下标
  var index = 1
  var flag = true
  // 右按钮滑动
  $('a.rightBtn').click(function () {
    if (!flag) return false;
    flag = false
    index++
    $('.carousel ul').animate({
      left: -index * $first.width()
    }, 2300, 'swing', function () {
      if (index === $('.carousel ul li').length - 1) {
        index = 1
        $('.carousel ul').css('left', -$first.width() + "px")
      }
      $('ol li').eq(index - 1).css('background-color', '#fff').siblings().css('background-color', '#000')
      flag = true
    })
    return false;
  })

  $('a.leftBtn').click(function () {
    if (!flag) return false;
    flag = false
    index--
    $('.carousel ul').animate({
      left: -index * $first.width()
    }, 2300, 'swing', function () {
      if (index === 0) {
        index = $('.carousel ul li').length - 2
        $('.carousel ul').css('left', -index * $first.width() + "px")
      }
      $('ol li').eq(index - 1).css('background-color', '#fff').siblings().css('background-color', '#000')
      flag = true
    })
    return false;
  })

  $('ol li').click(function () {
    if (!flag) return false;
    flag = false
    index = $(this).index() + 1
    $('.carousel ul').animate({
      left: -index * $first.width()
    }, 2300, 'swing', function () {
      if (index === 0) {
        index = $('.carousel ul li').length - 2
        $('.carousel ul').css('left', -index * $first.width() + "px")
      }
      $('ol li').eq(index - 1).css('background-color', '#fff').siblings().css('background-color', '#000')
      flag = true
    })
  })

  var timerId = setInterval(function () {
    if (!flag) return false;
    flag = false
    index++
    $('.carousel ul').animate({
      left: -index * $first.width()
    }, 2300, 'swing', function () {
      if (index === $('.carousel ul li').length - 1) {
        index = 1
        $('.carousel ul').css('left', -$first.width() + "px")
      }
      $('ol li').eq(index - 1).css('background-color', '#fff').siblings().css('background-color', '#000')
      flag = true
    })
  }, 3000)

  $('.carousel').hover(function () {
    clearInterval(timerId)
  }, function () {
    timerId = setInterval(function () {
      if (!flag) return false;
      flag = false
      index++
      $('.carousel ul').animate({
        left: -index * $first.width()
      }, 2300, 'swing', function () {
        if (index === $('.carousel ul li').length - 1) {
          index = 1
          $('.carousel ul').css('left', -$first.width() + "px")
        }
        $('ol li').eq(index - 1).css('background-color', '#fff').siblings().css('background-color', '#000')
        flag = true
      })
    }, 3000)
  })
})

//首页手机数据动态添加
var loadindex = layer.load(0,{
  shade:[0.2,'skyblue']
})
$.get('php/phone.php',res=>{
  // console.log(res)
  //加载好的数据解构出来
  var {meta:{status,msg},data} = res
  if(status === 1){
    var str = ''
    for(var i=0; i<data.length; i++){
      str += `
        <a href='details.html?id=${data[i].id}'><li>
          <img src="${data[i].imgpath}" class="mifen-pic" height="140" width="${data[i].imgpath.width * 140 / data[i].imgpath.height}">
          <h5 class="mifen-type">${data[i].name}</h5>
          <p class="mifen-info">${data[i].info}</p>
          <div class="mifen-price"><span>${data[i].price}</span>元起</div>
        </li></a>
      `
    }
    $('.mix-r').html(str)
  }
  layer.close(loadindex)
},'json')